Skip to content

feat(timeline): allow custom point markers#1676

Open
nikexiaobai wants to merge 2 commits into
themesberg:mainfrom
nikexiaobai:allow-custom-timeline-point
Open

feat(timeline): allow custom point markers#1676
nikexiaobai wants to merge 2 commits into
themesberg:mainfrom
nikexiaobai:allow-custom-timeline-point

Conversation

@nikexiaobai
Copy link
Copy Markdown

@nikexiaobai nikexiaobai commented May 21, 2026 •
edited by coderabbitai Bot
Loading

Summary

  • Allow TimelinePoint to render custom children as the point marker
  • Add a test covering Avatar usage inside TimelinePoint
  • Add an activity log example to the Timeline docs

Closes #1276

Tests

  • vitest run src/components/Timeline/Timeline.test.tsx
  • bun run build:ui
  • prettier --check ...

Summary by CodeRabbit

  • New Features

    • Timeline now supports rendering custom point markers (e.g., avatars) in place of icons.

  • Documentation

    • Added an "Activity log" section to the Timeline docs with a usage example.

  • Examples

    • Added an Activity Log example to the Timeline examples export.

  • Tests

    • Added test coverage verifying custom point marker rendering in Timeline.

Review Change Stack

@vercel
Copy link
Copy Markdown

vercel Bot commented May 21, 2026

@nikexiaobai is attempting to deploy a commit to the Bergside Team on Vercel.

A member of the Team first needs to authorize it.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 21, 2026 •
edited
Loading

🦋 Changeset detected

Latest commit: 77f5e07

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
flowbite-react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 21, 2026 •
edited
Loading

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 38b83f2c-5450-4b87-9864-d2b43821d0c7

📥 Commits

Reviewing files that changed from the base of the PR and between 66cc64e and 77f5e07.

📒 Files selected for processing (1)
  • .changeset/gentle-timelines-share.md
✅ Files skipped from review due to trivial changes (1)
  • .changeset/gentle-timelines-share.md
📝 Walkthrough

Walkthrough

TimelinePoint now prioritizes rendering children as the point marker (allowing Avatar), with tests, a new activity log example and MDX docs, plus a changeset entry.

Changes

Timeline custom point marker feature

Layer / File(s) Summary
TimelinePoint children support and tests
packages/ui/src/components/Timeline/TimelinePoint.tsx, packages/ui/src/components/Timeline/Timeline.test.tsx		 TimelinePoint now prioritizes rendering children over Icon, enabling custom components as point markers. Tests add an Avatar import, a TestTimelineWithCustomPoint helper, and a case asserting children render as the marker.
Activity log example with Avatar timeline points
apps/web/examples/timeline/timeline.activityLog.tsx, apps/web/examples/timeline/index.ts		 New example component renders a Timeline with two TimelineItems using Avatars as point markers and exports activityLog; index.ts re-exports the example. Example includes a code string and activityLog metadata.
Activity log documentation section & changeset
apps/web/content/docs/components/timeline.mdx, .changeset/gentle-timelines-share.md		 Docs add an "Activity log" section describing custom point markers and reference the timeline.activityLog example. Changeset notes the change for a patch release.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

:books: documentation, :rocket: enhancement

Suggested reviewers

  • rluders

Poem

🐰
A tiny hop upon the timeline's thread,
An avatar now bears the marker's head.
Children take the place of simple icons bright,
Points wear faces in the morning light.
Hooray — the feed now feels delightfully right!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main change: enabling custom point markers in the Timeline component, which is the core objective of this PR.
Linked Issues check ✅ Passed The PR successfully implements the requirement from #1276 by allowing TimelinePoint to accept and render custom children (e.g., Avatar) as point markers.
Out of Scope Changes check ✅ Passed All changes are directly related to the objective: TimelinePoint implementation, test coverage, documentation example, and changelog entry for the custom marker feature.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Allow Avatar as a Timeline.Point

1 participant

@nikexiaobai